home *** CD-ROM | disk | FTP | other *** search
/ PC Plus SuperCD (UK) 1999 January / PC Plus Super CD No55a (PCP-147A-1-99) (Disc 1) (1998).iso / linux / developers / visualtcl / windows / vtcl / doc / tutorial.txt
Encoding:
Text File  |  1997-05-27  |  14.1 KB  |  418 lines

  1.  
  2. Welcome to  the vTcl  Tutorial!  We'll  guide you through  some simple
  3. examples that demonstrate  several  basic  tasks  to  get  you up  and
  4. running with vTcl.
  5.  
  6. Before we  can start, we   need to make  sure  we're speaking the same
  7. language and working in the same environment:
  8.  
  9. o  software versions.
  10. o  terminology and naming conventions used in this tutorial.
  11. o  vTcl user preferences.
  12.  
  13.  
  14. Software Versions
  15. =================
  16.  
  17. If you have older or newer versions of the software, you may find that
  18. some of  the descriptions don't  match what you see. Hopefully, you'll
  19. still be able to work through the tutorials.
  20.  
  21. These tutorials are based on the following versions:
  22.  
  23. tcl   7.6
  24. tk    4.2
  25. vTcl  1.10
  26.  
  27.  
  28. Terminology and Naming Conventions for this Tutorial
  29. ====================================================
  30.  
  31. vTcl  has   several  main windows.    We'll  refer   to them   by  the
  32. abbreviations given in the table below.  Some of  the vTcl windows are
  33. transient.   Your  window manager might  not  decorate them with Title
  34. Bars. The Window menu in the main menu lets you  open and close all of
  35. the vTcl main windows.
  36.  
  37. Abbrev  Window Title Bar    Short Description
  38. ------  ----------------    -----------------
  39.  
  40. [Attr]  Attribute Editor    attribute editor for the active widget
  41. [Cons]  Visual Tcl Console  command console
  42. [Func]  Functions           list of functions you've defined
  43. [Geom]  Attribute Editor    geometry parameters for the active widget
  44. [Menu]  Visual Tcl          main menu: File, Edit, Mode, etc
  45. [Tool]  Widget Toolbar      palette of widget icons
  46. [Tops]  Toplevel Windows    list of top level windows you've created
  47. [Tree]  Widget Browser      widget tree diagram of your application
  48. [Vars]  Variables           list of global variables you've defined
  49. [Widg]  Attribute Editor    information for the active widget
  50.  
  51. Note that [Widg] and [Geom] are actually sections within the [Attr]
  52. window.
  53.  
  54. Further, we'll  refer   to a widget within   these  windows  with  the
  55. convention "[Abbrev]:widget".   This reference means to actually click
  56. the specified widget with the left mouse  button.  The widget may be a
  57. button, entry field  or a sequence of menu  items.  In the case of the
  58. Widget Toolbar which   just contains icons, we  give  the text of  the
  59. balloon help. For example:
  60.  
  61. [Menu]:File/New     - select the "New" item in the "File" menu.
  62. [Tool]:button       - select the button widget in the Widget Toolbar.
  63. [Attr]:text         - click in the entry field of the "text" item in
  64.                       the Attribute Editor.
  65. [Attr]:command(...) - click the "..." button for the "command" item in
  66.                       the Attribute Editor.
  67.  
  68. Generally, you need  to click on  an entry field in  a vTcl  window to
  69. make it active for entry, and  you need to  press ENTER for the change
  70. to take effect.
  71.  
  72. There are several auxiliary  windows in vTcl  for command and function
  73. editing, setting  aliases,  etc. Here  are the  windows that we'll  be
  74. using:
  75.  
  76. Abbrev   Window Title Bar      Short Description
  77. ------   --------------------  -----------------
  78.  
  79. [Alias]  Widget Alias for ...  entry dialog for widget aliases
  80. [Comm]   Command for ...       button and menu edit window
  81. [Edit]   (toplevel name)       function edit window
  82. [Pref]   Preferences           vTcl preferences
  83.  
  84.  
  85. Finally, we'll refer to the windows that _you_ create by names that
  86. we'll assign as they are created. For example:
  87.  
  88. [Hello]    - the window that you create in tutorial #1
  89. [Goodbye]  - the window that you create in tutorial #2
  90.  
  91. A very important window is the Widget Info window, or [Widg], which is
  92. the top section of the Attribute Editor. It shows the following:
  93.  
  94. o  Widget   - the name of the selected widget. Except for toplevels,
  95.               the active widget is also highlighted with little square
  96.               blocks in the corners.
  97. o  Class    - the type of widget or frame.
  98. o  Manager  - the geometry manager of the active widget.
  99. o  Alias    - an alias that you can assign to refer to this widget.
  100.               Aliases are stored in an array called "widget".
  101. o  Insert   - widgets selected from the Widget Toolbar, or [Tool],
  102.               will be inserted into this widget or frame.
  103.  
  104.  
  105. vTcl user preferences
  106. =====================
  107.  
  108. vTcl supports   several  user preference  settings  in the Preferences
  109. window, [Pref], which  you get  from [Menu]:File/Preferences.   You'll
  110. have to  set   yours to match   what  we  used  here  or  you'll  have
  111. difficulties following the tutorials. If you find your version of vTcl
  112. has more preferences  than are defined  here, try leaving them  in the
  113. default state.
  114.  
  115. The preferences in  these examples were the defaults  at the time that
  116. this tutorial was written. Feel free  to customize vTcl preferences as
  117. you like after you've finished these tutorials.
  118.  
  119.         The Basics
  120.         ----------
  121.  
  122.         [X] Use Balloon Help
  123.         [ ] Ask for Widget name on insert
  124.         [X] Short automatic widget names
  125.         [ ] Save verbose widget configuration
  126.         [ ] Save global variable values
  127.         [ ] Window focus selects window
  128.  
  129.         Default Geometry Manager
  130.         ------------------------
  131.  
  132.         ( ) Grid   ( ) Pack     (X) Place
  133.  
  134.         Widget Option Encapsulation
  135.         ---------------------------
  136.  
  137.         (X) List   ( ) Braces   ( ) Quotes
  138.  
  139.  
  140. ===========
  141. Tutorial #1
  142. ===========
  143.  
  144. The  first time  a task is   presented, there are  extra  comments and
  145. instructions. As these  basics  are repeated, the  instructions become
  146. more terse.
  147.  
  148.  1) Start vtcl. Four windows open: [Menu], [Widg], [Func], [Attr].
  149.  
  150.     You'll probably need to move them around so that  you can see them
  151.     all at once. I  like to place the  [Attr] window on the right side
  152.     of the screen  and stretch it to be  full height. There's a lot of
  153.     info in this one window. Also, depending on the font size that you
  154.     use, you may need to  stretch the width  of this window to see the
  155.     little controls on the right edge. For example, [Attr]:command has
  156.     a button to the right of the entry field with three dots on it.
  157.  
  158.  2) Check that [Menu]:File/Preferences match the list above.
  159.  
  160.  3) Make sure that you also have the [Tops] window showing.
  161.     Turn it on with [Menu]:Window/Toplevels.
  162.     Note that [Menu]:Window lets you open and close all of the vTcl
  163.     main windows.
  164.  
  165.  4) Create a window.
  166.  
  167.     a - click [Tool]:toplevel
  168.         It's the top left square with the blue strip across the top.
  169.  
  170.     Note the balloon help  when you hold the mouse  still over an icon
  171.     for a couple of seconds! Have a look at  the balloon help for each
  172.     icon now to get familiar with what they are.
  173.  
  174.     Note  also that [Widg], [Attr]  and [Geom], which are actually all
  175.     in the  Attribute Editor window, filled  up  with info and options
  176.     for the  toplevel window just   created. The information  in these
  177.     windows  changes  as you select different   widgets by clicking on
  178.     them with the left mouse button to make them active.
  179.  
  180.  5) Change the title of the window.
  181.  
  182.     a - click [Geom]:title
  183.     b - erase the default title: New Toplevel 1
  184.     c -  type our new title: Hello
  185.     d - press ENTER.
  186.  
  187.     Note that the  title bar of your  new window changes, as  does the
  188.     name in the [Tops] window.
  189.  
  190.  6) Create a button in the window.
  191.  
  192.     a - click [Tool]:button
  193.  
  194.     Note the button created in the Hello window!
  195.  
  196.  7) Change the text on the button.
  197.  
  198.     a - click [Attr]:Text
  199.     b - erase: button
  200.     c -  type: Say Hello
  201.     d - press ENTER
  202.  
  203.     Note that the text of the button changes to "Say Hello".
  204.  
  205.  8) Give the button something to do when it's clicked.
  206.  
  207.     a - click [Attr]:Command(...)
  208.         Note the [Comm] editor window that pops up
  209.     b -  type in the [Comm] editor window: puts "Hello, World!"
  210.     c - click [Comm]:OK
  211.  
  212.  9) Move the button around to make it look nice.
  213.  
  214.     The "Place" geometry manager  allows you to  simply drag and  drop
  215.     widgets in  the window to  reposition them.  Don't drag the little
  216.     black   squares in the  corners:  they  resize the button  itself.
  217.     Click and drag the center of the button.
  218.  
  219.     In your [Hello] window,
  220.  
  221.     a - Try moving  your  "Say Hello"  button  to the  middle  of  the
  222.         window. Also try  resizing the whole  window itself using  the
  223.         normal window manager   methods (dragging  window corners  and
  224.         edges) to make it all look nice.
  225.  
  226. 10) Save your program to a disk file.
  227.  
  228.     a - click [Menu]:File/SaveAs
  229.     b -  type the name hello1.tcl in the Selection field.
  230.     c - click Save or press Enter.
  231.  
  232. It's  now   ready   to   run  by  executing  "wish   hello1.tcl",  or
  233. "chmod  755  hello1.tcl"  and  execute  it  directly  as "hello1.tcl".
  234. On UNIX systems, the message is written to the xterm where you execute
  235. the program.  If you're  on some other platform  and you don't see the
  236. message  anywhere,  just go  on to  the next  tutorial where we  add a
  237. pop-up  window  for  the  message.
  238.  
  239.  
  240. ===========
  241. Tutorial #2
  242. ===========
  243.  
  244. Tutorial #1 can be  improved by popping  up a hello window rather than
  245. just writing to stdout.
  246.  
  247. If  you are  continuing from  the  same vTcl  session as  Tutorial #1,
  248. you're ready   to   go.  Otherwise,  [Menu]:File/Close   any  existing
  249. application then [Menu]:File/Open the  file "hello1.tcl" from Tutorial
  250. #1.
  251.  
  252. Besides creating and hiding a  second window, this tutorial introduces
  253. the very useful "alias"  feature. You name  widgets and toplevels  and
  254. then  refer to  them  by name using  the  "widget" array.  This avoids
  255. having to use the long complicated names that are generated.
  256.  
  257.  1) Make sure that you have these windows showing:
  258.  
  259.     [Menu], [Widg], [Func], [Attr], [Tops].
  260.  
  261.     Turn on any missing windows with [Menu]:Window.
  262.  
  263.  2) Create a second toplevel window.
  264.  
  265.     a - click [Tool]:toplevel
  266.  
  267.  3) Change the title of the window.
  268.  
  269.     a - click [Geom]:title
  270.     b - erase the default title: New Toplevel 2
  271.     c -  type our new title: Goodbye
  272.     d - press ENTER
  273.  
  274.  4) Give the button an alias for easy reference.
  275.  
  276.     a - click [Menu]:Options/SetAlias
  277.         Note the little alias entry window pops up.
  278.     b -  type: msg
  279.     c - click [Alias]:OK
  280.  
  281.  5) Put a message in the window.
  282.  
  283.     a - click [Tool]:message
  284.  
  285.     Note that a message widget is added to the active window.
  286.  
  287.  6) Change the message text to the familiar friendly greeting.
  288.  
  289.     a - click [Attr]:Text
  290.     b - erase: message
  291.     c -  type: Hello, World!
  292.     d - press ENTER
  293.  
  294.  7) Change the aspect ratio attribute to put the message all on one
  295.     line.
  296.  
  297.     a - click [Attr]:Aspect
  298.     a - change 150 to some bigger number (1500 will do)
  299.     b - press ENTER
  300.  
  301.     Note how the message all fits on one line now.
  302.  
  303.  8) Now add a button to the window.
  304.  
  305.     a - click [Tool]:button
  306.  
  307.     Note that the button  is placed on top of  the message, but  we'll
  308.     move it in a minute.
  309.  
  310.  9) Change the text on the button.
  311.  
  312.     a - click [Attr]:Text
  313.     b - erase: button
  314.     c -  type: Goodbye
  315.     d - press ENTER
  316.  
  317. 10) Move the button and message around to make it all look nice.
  318.  
  319.     In the [Goodbye] window,
  320.  
  321.     a - Drag the "Goodbye" button down so it's not covering the
  322.         "Hello" message.
  323.     b - Arrange the placement of the two widgets and resize the window
  324.         itself using the normal window manager controls to make it all
  325.         look nice.
  326.  
  327. 11) Make sure the Goodbye button is the active widget.
  328.  
  329.     a - click [Goodbye]:Goodbye
  330.  
  331.     By clicking  the "Goodbye"  button, you  "select" it  for editing.
  332.     Note the little black squares in the corners to indicate this.  If
  333.     you just finished  dragging   the "Hello" message,  the  "Goodbye"
  334.     button wouldn't be the active (selected) widget.
  335.  
  336. 12) Give the Goodbye button a command to hide the [Goodbye] window.
  337.  
  338.     a - click [Attr]:Command(...)
  339.     b -  type in the [Comm] window: Window hide $widget(msg)
  340.     c - click [Comm]:OK
  341.  
  342. 13) Position the goodbye window.
  343.  
  344.     Drag the [Goodbye] window  (by  the window  manager title bar)  to
  345.     place it where you want it to pop up when you execute the program.
  346.     vTcl enters this geometry placement into your application, but not
  347.     all window managers will honor this placement.
  348.  
  349. 14) Hide the [Goodbye] window.
  350.  
  351.     In the [Tops] window,
  352.  
  353.     a - select Goodbye in the listbox
  354.     b - click [Tops]:Hide
  355.  
  356.     When you click [Menu]:File/Save to   save your applications,  make
  357.     sure that you have your toplevel windows showing  or hidden as you
  358.     would want them  to be when  a user runs  your application. In our
  359.     program,  if you  save it  with the  "Goodbye" window showing, the
  360.     user will get both windows at startup.
  361.  
  362. 15) Give the "Hello" button the command to show the second window.
  363.  
  364.     In the [Hello] window,
  365.  
  366.     a - click the "Hello" button to make it active.
  367.     b - click [Attr]:Command(...)
  368.     c - erase: puts "Hello, World!"
  369.     d -  type: Window show $widget(msg)
  370.     e - click [Comm]:OK
  371.  
  372. 16) Save your program to a disk file.
  373.  
  374.     a - click [Menu]:File/SaveAs
  375.     b -  type the name hello2.tcl in the Selection field.
  376.     c - click Save or press Enter.
  377.  
  378. It's  now  ready  to run by executing  "wish  hello2.tcl",  or
  379. "chmod 755 hello2.tcl" and execute it directly as "hello2.tcl".
  380.  
  381. Click "Say Hello", and the Goodbye window pops up. Click "Goodbye"
  382. and the window goes away again.
  383.  
  384.  
  385. ===========
  386. Tutorial #3
  387. ===========
  388.  
  389. If  you  are continuing  from the  same  vTcl session  as Tutorial #2,
  390. you're ready  to   go.   Otherwise,  [Menu]:File/Close any    existing
  391. application then  [Menu]:File/Open the file "hello2.tcl" from Tutorial
  392. #2.
  393.  
  394. In [Menu]:Mode are items that toggle between EDIT and TEST mode. We've
  395. been in EDIT mode up to this point.  TEST  mode allows you to actually
  396. run your application  from within vTcl!  The current mode is shown  on
  397. the bottom line  of the  [Menu] window.  This indicator  is in fact  a
  398. convenience button that you can click to toggle between the two modes.
  399.  
  400.  1) Change to TEST mode to test the program from within vTcl.
  401.  
  402.     a - click [Menu]:Mode/TestMode
  403.  
  404.     Note that the indicator in the [Menu] window changes to show TEST.
  405.     Now you can click the  "Hello" and "Goodbye"  buttons and see that
  406.     the application works without leaving vTcl!
  407.  
  408. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  409.  
  410. Last modified: 12 May 1997
  411.  
  412. Written by Rick Macdonald <rickm@vsl.com>, with suggestions from:
  413.  
  414. Stewart Allen 
  415. Larry W. Virden
  416.  
  417. Your feedback is welcome!
  418.